<template>
  <div class="dashboard-container">
    <!-- 用户/产品/订单/退单总量 -->
    <el-row>
      <el-col :span="5">
        <el-card>
          <div slot="header">
            <span>
              <svg-icon icon-class="users" />&nbsp;
              <b class="iconColor">用户数量:</b>
              {{dashboard.userCount}}
              <b class="iconColor">个</b>
            </span>
          </div>
          <div>
            <span>今日新增:{{dashboard.userToday}}</span>
          </div>
        </el-card>
      </el-col>

      <el-col :span="5" :offset="1">
        <el-card>
          <div slot="header">
            <span>
              <svg-icon icon-class="product" />&nbsp;
              <b class="iconColor">产品数量:</b>
              {{dashboard.productCount}}
              <b class="iconColor">个</b>
            </span>
          </div>
          <div>
            <span>今日新增:{{dashboard.productToday}}</span>
          </div>
        </el-card>
      </el-col>

      <el-col :span="5" :offset="1">
        <el-card>
          <div slot="header">
            <span>
              <svg-icon icon-class="order" />&nbsp;
              <b class="iconColor">订单数量:</b>
              {{dashboard.orderCount}}
              <b class="iconColor">个</b>
            </span>
          </div>
          <div>
            <span>今日新增:{{dashboard.orderToday}}</span>
          </div>
        </el-card>
      </el-col>

      <el-col :span="5" :offset="1">
        <el-card>
          <div slot="header">
            <span>
              <svg-icon icon-class="back" />&nbsp;
              <b class="iconColor">退单数量:</b>
              {{dashboard.backCount}}
              <b class="iconColor">个</b>
            </span>
          </div>
          <div>
            <span>今日退单:{{dashboard.backToday}}</span>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 每日订单数量 -->
    <div id="echart" style="width: 800px;height:400px;"></div>

    <!-- 日历 -->
    <el-calendar v-model="value"></el-calendar>

  </div>
</template>

<script>
import dashboardApi from "@/api/dashboard/index";
var echarts = require("echarts");

export default {
  name: "Dashboard",
  data() {
    return {
      dashboard: {},
      value: new Date()
    };
  },
  created() {
    this.getDashBoard();
   
  },
  mounted() {
    this.myChart = echarts.init(document.getElementById("echart")); // 基于准备好的dom，初始化echarts实例
  },
  methods: {
    getDashBoard() {
      dashboardApi.dashboard().then((res) => {
        this.dashboard = res;
        this. initOrderEcharts();
      });
    },

    // 订单报表
    initOrderEcharts() {
      var xData=[];
      var yData=[];
      for(var i=0;i<this.dashboard.orderByDay.length;i++){
        var itemOrder=this.dashboard.orderByDay[i]
        xData.push(itemOrder.date)
        yData.push(itemOrder.count)
      }
      this.myChart.setOption({
        color: ["#1296DB"],
        title:{
          text:"订单数量/日期"
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: xData,
            axisTick: {
              alignWithLabel: true,
            },
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [
          {
            name: "订单数量",
            type: "bar",
            barWidth: "60%",
            data: yData,
          },
        ],
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.dashboard-container {
  .el-row {
    margin: 30px;
  }
  #echart{
     margin: 30px;
     padding-top: 20px;
  }
  .el-calendar{
     margin: 30px;

  }
  .iconColor {
    color: #1296db;
  }
}
</style>
